<template>
  <div class="access">
    <section class="access__bread-crumb">
      <BreadCrumb
        v-model:dateRange="dateRange"
        :show-date="true"
        @change="dateChange"
      />
    </section>
    <section class="base-page-container access__search">
      <BaseRadioGroupLabelItem
        v-model:select="deviceSelect"
        label="设备"
        :options="deviceOptions"
        @change="deviceChange"
      />
    </section>
    <section class="base-page-container access__content">
      <div class="access__tree">
        <div class="access__tree__search">
          <span>页面</span>
          <el-select v-model="targetSelect" class="access__tree__search__select" placeholder="不限">
            <el-option
              v-for="item in targetOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
          <el-radio-group v-model="targetSelect" @change="targetChange">
            <el-radio-button v-for="item in targetOptions" :key="item.value" :label="item.value">
              {{ item.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
        <div class="access__tree_chart">
          <KTreePolylineChart
            :y-data="treeData"
            width="100%"
            height="274px"
          />
        </div>
      </div>
      <div class="access__table">
        <k-table
          v-loading="state.loading"
          v-bind="tableState"
          v-on="tableEvent"
        >
          >
          <template #talentPool>
            <el-table-column prop="name" label="会话数" align="center" />
            <el-table-column prop="city" label="访客数" align="center" />
          </template>
          <template #liveDetail>
            <el-table-column prop="name" label="会话数" align="center" />
            <el-table-column prop="city" label="访客数" align="center" />
          </template>
          <template #videoDetail>
            <el-table-column prop="state" label="会话数" align="center" />
            <el-table-column prop="city" label="访客数" align="center" />
          </template>
        </k-table>
      </div>
    </section>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { BaseRadioGroupLabelItem } from '@/components/base-form';
import BreadCrumb from '@/components/base-bread-crumb/index.vue';
import { KTreePolylineChart } from '@/components/k-charts';
import { useTableList } from './hooks/use-table';
import { deviceOptions } from './data.ts';
defineOptions({
  name: 'KgjPageSceneAccess'
});
const { state, tableState, tableEvent } = useTableList({});
const deviceSelect = ref(0);
const deviceChange = (val: string | number | boolean) => {
  console.log(val);
};
const targetSelect = ref(1);
const targetOptions: any[] = reactive([
  { label: '来源行为', value: 1 },
  { label: '后续行为', value: 2 }
]);
const targetChange = () => {
  console.log(1);
};
//
const dateRange = ref(null);
const dateChange = () => {
  console.log(11);
};
const treeData = [{
  name: '概览',
  children: [
    {
      name: '概览概览概览概览概览概览',
      axisValue: 56,
      children: [
        {
          name: 'converters', value: 721,
          children: [
            { name: 'Converters', value: 721 },
            { name: 'DelimitedTextConverter', value: 4294 }
          ]
        },
        {
          name: 'DataUtil',
          value: 3322
        }
      ]
    },
    {
      name: 'display', value: 721,
      children: [
        { name: 'DirtySprite', value: 8833 },
        { name: 'LineSprite', value: 1732 },
        { name: 'RectSprite', value: 3623 }
      ]
    },
    {
      name: 'flex',
      value: 21,
      children: [{ name: 'FlareVis', value: 4116 }]
    },
    {
      name: 'query',
      value: 21,
      children: [
        { name: 'AggregateExpression', value: 1616 },
        { name: 'And', value: 1027 },
        { name: 'Arithmetic', value: 3891 },
        { name: 'Average', value: 891 },
        { name: 'BinaryExpression', value: 2893 },
        { name: 'Comparison', value: 5103 },
        { name: 'CompositeExpression', value: 3677 },
        { name: 'Count', value: 781 },
        { name: 'DateUtil', value: 4141 },
        { name: 'Distinct', value: 933 },
        { name: 'Expression', value: 5130 },
        { name: 'ExpressionIterator', value: 3617 },
        { name: 'Fn', value: 3240 },
        { name: 'If', value: 2732 },
        { name: 'IsA', value: 2039 },
        { name: 'Literal', value: 1214 },
        { name: 'Match', value: 3748 },
        { name: 'Maximum', value: 843 },
        {
          name: 'methods',
          children: [
            { name: 'add', value: 593 },
            { name: 'and', value: 330 },
            { name: 'average', value: 287 },
            { name: 'count', value: 277 },
            { name: 'distinct', value: 292 },
            { name: 'div', value: 595 },
            { name: 'eq', value: 594 },
            { name: 'fn', value: 460 },
            { name: 'gt', value: 603 },
            { name: 'gte', value: 625 },
            { name: 'iff', value: 748 },
            { name: 'isa', value: 461 },
            { name: 'lt', value: 597 },
            { name: 'lte', value: 619 },
            { name: 'max', value: 283 },
            { name: 'min', value: 283 },
            { name: 'mod', value: 591 },
            { name: 'mul', value: 603 },
            { name: 'neq', value: 599 },
            { name: 'not', value: 386 },
            { name: 'or', value: 323 },
            { name: 'orderby', value: 307 },
            { name: 'range', value: 772 },
            { name: 'select', value: 296 },
            { name: 'stddev', value: 363 },
            { name: 'sub', value: 600 },
            { name: 'sum', value: 280 },
            { name: 'update', value: 307 },
            { name: 'variance', value: 335 },
            { name: 'where', value: 299 },
            { name: 'xor', value: 354 },
            { name: 'x_x', value: 264 }
          ]
        },
        { name: 'Minimum', value: 843 },
        { name: 'Not', value: 1554 },
        { name: 'Or', value: 970 },
        { name: 'Query', value: 13896 },
        { name: 'Range', value: 1594 },
        { name: 'StringUtil', value: 4130 },
        { name: 'Sum', value: 791 },
        { name: 'Variable', value: 1124 },
        { name: 'Variance', value: 1876 },
        { name: 'Xor', value: 1101 }
      ]
    },
    {
      name: 'scale',
      value: 21,
      children: [
        { name: 'IScaleMap', value: 2105 },
        { name: 'LinearScale', value: 1316 },
        { name: 'LogScale', value: 3151 },
        { name: 'OrdinalScale', value: 3770 },
        { name: 'QuantileScale', value: 2435 },
        { name: 'QuantitativeScale', value: 4839 },
        { name: 'RootScale', value: 1756 },
        { name: 'Scale', value: 4268 },
        { name: 'ScaleType', value: 1821 },
        { name: 'TimeScale', value: 5833 }
      ]
    }
  ]
}];
</script>
<style lang="scss" scoped>
.access {
  &__title {
    height: 24px;
    margin-bottom: $baseMarginBottom;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 24px;
    color: #303133;
  }

  &__tree {
    &__search {
      display: flex;
      align-items: center;

      &__select {
        margin: 0  16px 0 12px;
      }
    }
  }

  &__table {
    margin: 40px 0;
  }
}
</style>
